<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title></title>
  <script src="../../components/echarts-4.0.4.min.js"></script>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      background: #0A0F23;
    }

    * {
      margin: 0;
      padding: 0;
    }

  </style>
</head>

<body>
  <div id="main" style="width: 100%;height: 100%;"></div>
</body>
<script>
  var myChart = echarts.init(document.getElementById('main'));
  option = {
    backgroundColor: "#0A0F23",
      color: ['#336c9c','#8ce8e7','#62cff1','#17d4ee','#4fac88','#59c293','#67c47b','#f86e89', '#ef7218', '#f5d650'],
    title: {
      text: "2017年底我省有效发明专利产业领域分布图",
      top: "15%",
      left: "center",
      textStyle: {
        color: "#FFF",
        fontSize: 22
      }
    },
    legend: {
      data: ['大专院校', '企业', '科研机构', '个人', '机关团体'],
      right: '5%',
      orient: 'vertical',
      bottom: '3%',
      textStyle: {
        color: '#fff',
        fontSize: 16
      }
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      top: '25%',
      left: '5%',
      bottom: '3%',
      right: '13%',
      containLabel: true
    },
    yAxis: [{
      type: 'category',
      inverse: true,
      data: ['装备制造', '电子信息', '现代化工', '土木工程', '生活必需品', '新一代信息技术', '生物育种', '高端装备制造', '新材料', '节能环保', '新能源', '新能源汽车'],
      axisTick: {
        alignWithLabel: true
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 12
        }
      },
      splitLine: {
        lineStyle: {
          type: 'dashed',
          color: '#0A0F23'
        }
      },
      axisLine: {
        lineStyle: {
          color: '#fff'
        }
      }
    }],
    xAxis: [{
      type: 'value',
      position: 'top',
      splitLine: {
        show: false,
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLabel: {
        textStyle: {
          color: '#fff',
          fontSize: 16
        }
      },
      axisLine: {
        lineStyle: {
          show: false,
          color: '#fff'
        }
      }
    }],
    series: [{
      name: '大专院校',
      type: 'bar',
      stack: '总量',
      barWidth: '30%',
      data: [5306, 4272, 2896, 512, 280, 4225, 1074, 1306, 1024, 295, 174, 35]
    }, {
      name: '企业',
      type: 'bar',
      stack: '总量',
      barWidth: '30%',
      data: [4289, 1753, 2661, 1216, 259, 1522, 943, 1637, 482, 251, 74, 39]
    }, {
      name: '科研机构',
      type: 'bar',
      stack: '总量',
      barWidth: '30%',
      data: [1357, 572, 637, 45, 49, 604, 73, 218, 186, 75, 13, 0]
    }, {
      name: '个人',
      type: 'bar',
      stack: '总量',
      barWidth: '30%',
      data: [398, 115, 263, 113, 122, 89, 373, 81, 30, 46, 12, 7]
    }, {
      name: '机关团体',
      type: 'bar',
      stack: '总量',
      barWidth: '30%',
      data: [33, 22, 21, 8, 5, 22, 73, 10, 6, 0, 0, 0]
    }]
  };

  myChart.setOption(option);

</script>

</html>
